<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .main{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .bodyer{
            height: calc(100% - 130px);
            background: #ffffff url("../image/bg2.jpg")no-repeat;
            background-size: contain;
        }
        .header_t{
            border-bottom: 1px solid #3e93ff;
            background: #146ffb;
            /*background: red;*/
            height: 40px;
        }
        .header_b{
            height: 90px;
            width: 100%;
            background: url("../image/bg1.png")no-repeat;
            background-size: cover;
            background-position: center bottom;

        }
        .header_b>div{
            width: 65%;
            height: 100%;
            position: relative;
        }
        .header_b .news{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(25,102,203,0.9);
            height: 40px;
        }
        .header_b .news>div{
            flex : 1;
        }
        .header_b .news>div>p{
            cursor: pointer;
            width: 100%;
            color: #ffffff;
            text-indent: 50px;
            justify-content: flex-start;
            font-size: 12px;
        }
        .header_b .news>div:nth-of-type(2)>p{
            border-left: 1px solid #ffffff;
        }
        p{
            margin:  0 ;
        }
        body .header_t_c{
            width: 65%;
            height: 100%;
            justify-content: space-between;
            color: #ffffff;
        }
        .header_t_c>div{
            height: 100%;
        }
        .header_t_c ul {
            height: 100%;
        }
        .header_t_c ul li{
            height: 100%;
            padding: 0px 15px;
            box-sizing: border-box;
        }
        .header_t_c ul li span{
            display: flex;
            height: 100%;
            cursor: pointer;
        }
        body .header_t_c ul .ul_active{
            border-bottom: 2px solid #ffffff;
            box-sizing: border-box;
        }
        .photo{
            width: 30px;
            height: 30px;
            background: url("../image/head.png");
            background-size: cover;
            border-radius: 50%;
        }
        .name{
            padding: 0px 10px;
        }
        .quit_btn{
            color: #72afff;
            font-style: normal;
            font-size: 12px;
            height: 100%;
            cursor: pointer;
        }
        .power{
            align-items: flex-start;
            padding-top: 20px;
            box-sizing: border-box;
            width: 65%;
            justify-content: space-between;
            height: 100%;
            /*background: red;*/
        }
        .power_l{
            width: 200px;
            background: #ffffff;
            /*height: 100%;*/
            box-shadow: 2px 2px 2px #c7c7c7;
        }
        .power_r{
            box-shadow: 2px 2px 2px #c7c7c7;
            /*width: 75%;*/
            width: calc(100% - 240px);
            background: #ffffff;
            /*height: 100%;*/
            padding: 15px 10px;
            /*box-sizing: border-box;*/
        }
        .photo_box{
            padding: 20px;
            flex-direction: column;
        }
        .photo2{
            cursor: pointer;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: url("../image/head.png");
            background-size: cover;
            position: relative;
            overflow: hidden;
        }
        .photo2_curtain{
            line-height: 26px;
            height: 30px;
            background: rgba(0,0,0,0.7);
            position: absolute;
            color: #ffffff;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: center;
            font-size: 12px;
        }
        .photo2_curtain input{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        .photo2 input{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        .name2{
            padding-top: 10px;
            color: #949697;
            font-size: 14px;
        }
        .collect ,.down{
            cursor: pointer;
            border-top: 1px solid #eaeaea;
            color: #949697;
            padding: 10px 10px;
            font-size: 12px;
            justify-content: flex-start;
        }


        body  .power_l .active span{
            color: #ffffff;
        }
        body  .power_l .active{
            background: #1772fa;
        }
        body  .power_l .active .my_i_3{
            margin-left: 10px;
            width: 6px;
            height: 10px;
            background: url("../image/icon_3.png")no-repeat center center;
            background-size: cover;
        }

        body  .power_l .active .my_i_1{
            margin-left: 10px;
            width: 11px;
            height: 13px;
            background: url("../image/icon_19.png")no-repeat center center;
            background-size: cover;
        }


        body  .power_l .active span{
            color: #ffffff;
        }
        body  .power_l .active{
            background: #1772fa;
        }
        body  .power_l .active .my_i_2{
            margin-left: 10px;
            width: 11px;
            height: 11px;
            background: url("../image/icon_18.png")no-repeat center center;
            background-size: cover;
        }




        .icon4{
            width: 14px;
            height: 16px;
            background: url(../image/icon_14.png)no-repeat;
            background-size: cover;
            cursor: pointer;
        }
        .icon5{
            width: 16px;
            height: 16px;
            background: url(../image/icon_16.png)no-repeat;
            background-size: cover;
            cursor: pointer;
        }
        .collect span,.down span{
            display: inline-block;
            width: calc(100% - 40px);
            text-indent: 14px;
            /*margin-left: 10px;*/
        }
        .my_i_1{
            margin-left: 10px;
            width: 11px;
            height: 13px;
            background: url("../image/icon_13.png")no-repeat center center;
            background-size: cover;
        }
        .my_i_2{
            margin-left: 10px;
            width: 11px;
            height: 11px;
            background: url("../image/icon_11.png")no-repeat center center;
            background-size: cover;
        }
        .my_i_3{
            margin-left: 10px;
            width: 6px;
            height: 10px;
            background: url("../image/icon_12.png")no-repeat center center;
            background-size: cover;
        }
        .my_i_4{
            width: 12px;
            height: 15px;
            background: url("../image/icon_14.png")no-repeat center center;
            background-size: cover;
        }
        .search_box{
            margin-top: 20px;
            justify-content: flex-start;
            width: 100%;
            height: 40px;
            background: #fbfbfb;
            border: 1px solid #eaeaea;
            box-sizing: border-box;
            border-radius: 2px;
        }
        .search_box input{
            font-size: 12px;
            text-indent: 30px;
            width: calc(100% - 50px);
            outline: none;
            border: none;
            background: #fbfbfb;
        }
        .search_box i{
            display: inline-block;
            width: 22px;
            height: 22px;
            background: url("../image/icon_1.png")no-repeat center center;
            background-size: cover;
        }
        thead{
            background: #f7f7f7;
        }
        table th{
            text-align: center;
            font-size: 14px;
            line-height: 40px;
        }
        tr>td:nth-of-type(1){
            width: 40%;
        }
        tr>td:nth-of-type(2){
            width: 10%;
        }
        tr>td:nth-of-type(3){
            width: 15%;
        }
        tr>td:nth-of-type(4){
            width: 10%;
        }
        tr>td:nth-of-type(5){
            width: 5%;
        }
        tr>td:nth-of-type(6){
            width: 5%;
        }
        tr>td:nth-of-type(7){
            width: 10%;
        }
        tr>td:nth-of-type(8){
            width: 5%;
        }
        th:nth-of-type(1){
            width: 40%;
        }
        th:nth-of-type(2){
            width: 10%;
        }
        th:nth-of-type(3){
            width: 15%;
        }
        th:nth-of-type(4){
            width: 10%;
        }
        th:nth-of-type(5){
            width: 5%;
        }
        th:nth-of-type(6){
            width: 5%;
        }
        th:nth-of-type(7){
            width: 10%;
        }
        th:nth-of-type(8){
            width: 5%;
        }
        /*th:nth-of-type(9){*/
            /*width: 50px;*/
        /*}*/
        input[type=checkbox]{
            margin: 0;
        }
        body .table_box table td{
            /*justify-content: flex-start;*/
            text-align: center;
            font-size: 14px;
            color: #999999;
            line-height: 30px;
        }
        .table_box{
            border-top: 1px solid #eaeaea;;
        }
        body .table_box table td span{

            /*text-align: left;*/
            display: inline-block;
            width: calc(100% - 30px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /*overflow: hidden;white-space: nowrap;text-overflow: ellipsis;*/
        }
        td:nth-of-type(1){
            text-align: left;
            text-indent: 10px;
        }
        .btn_box{
            padding: 30px 0px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .btn_box_r{
            padding-right: 10px;
            color: #999999;
            font-size: 12px;
        }
        .btn_box_r input{
            border: #999999;
        }
        .btn_box_r span{
            padding: 0 10px 0px 5px;
        }

        .select_box{
            border-radius: 2px;
            border: 1px solid #eaeaea;
            height: 40px;
            justify-content: center;
            font-size: 14px;
            width: 100px;
            position: relative;
            cursor: pointer;
        }
        .select_box:nth-of-type(2){
            margin-left: 20px;
        }
        .select_box p{
            /*color: #949697;*/
        }
        .select_content{
            position: absolute;
            left: -1px;
            right: 0;
            top: 38px;
            background: #fff;
            border: 1px solid #eaeaea;
        }
        .select_content div{
            line-height: 30px;
            text-align: center;
            /*color: #949697;*/
        }
        .search_i_3{
            margin-left: 5px;
            width: 6px;
            height: 4px;
            background: url(../image/icon_2.png)no-repeat center center;
            background-size: cover;
        }
        .paging_box_{
            padding: 10px 10px 10px 0px;
            display: flex;
            justify-content: flex-end;
        }
        td{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        td>p{
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        tr{
            width: 100%;
            display: flex;
        }
        table,thead,tbody{
            width: 100%;
            display: inline-block;
        }

    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="header_t flex">
            <div class="header_t_c flex">
                <div class="flex">动态信息知识库</div>
                <div>
                    <ul class="flex">
                        <li class="flex"><span class="flex home_page">首页</span></li>
                        <li class="flex"><span class="flex knowledge_page">知识库</span></li>
                        <li class="flex"><span class="flex">系统管理</span></li>
                        <!--<li class="flex"><span class="flex">登陆</span></li>-->
                        <li class="flex">
                            <i class="photo"></i><span class="flex name">你好</span><i class="quit_btn flex">退出</i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="header_b flex"> </div>
    </div>
    <div class="bodyer flex">
        <div class="power flex">
            <div class="power_l">
                    <div class="photo_box flex">
                        <div class="photo2">
                            <input type="file" name="file" id="file" onchange="uploadImg_();"  >
                            <div class="photo2_curtain">
                                <!--<input type="file" name="file" id="file" onchange="uploadImg_();"  >-->
                                更换头像</div>
                        </div>
                        <div class="name2"></div>
                    </div>
                    <div class="down tab_btn active flex" type="down"><i class="my_i_1"></i><span>我的下载</span><i class="my_i_3"></i></div>
                    <div class="collect tab_btn flex" type="collect"><i class="my_i_2"></i><span>我的收藏</span><i class="my_i_3"></i></div>
            </div>
            <div class="power_r">
                <div class="search_box flex"><input class="search_inp" placeholder="请输入要搜索的内容" type="text"><i class="search_btn"></i></div>
                <div class="btn_box">
                    <div class="flex">
                        <div class="select_box flex">
                            <p value="null" id="search_type1" class="search_type">国家</p>
                            <i class="search_i_3"></i>
                            <div class="select_content1 select_content">

                            </div>
                        </div>
                        <div class="select_box flex">
                            <p value="null" id="search_type2" class="search_type">语言</p>
                            <i class="search_i_3"></i>
                            <div class="select_content2 select_content">

                            </div>
                        </div>
                    </div>
                    <div class="flex btn_box_r">
                        <!--<input type="checkbox"><span>批量删除</span><i class="my_i_4"></i>-->
                    </div>
                </div>
                <div class="table_box">
                    <table cellspacing="0">
                        <thead>
                        <tr>
                            <th >文章标题</th>
                            <th >作者</th>
                            <th >发布时间</th>
                            <th>媒体源</th>
                            <th>国家</th>
                            <th>语种</th>
                            <th >知识库</th>
                            <th >删除</th>
                        </tr>
                        </thead>
                        <tbody class="tbody">

                        </tbody>
                    </table>
                </div>
                <div class="paging_box_">

                </div>
            </div>
        </div>
    </div>
</div>


<script id="item_list_tem5" type="text/x-dot-template">
    {{~it:value:index}}
    <tr>
        <td>
            <div style="display: flex;justify-content: flex-start;align-items: center;width: 100%;padding:10px 0px">
                <input type="checkbox"><span class="title_box" title="{{=value.title}}" id_="{{=value.id}}" style="cursor: pointer;text-align: left">{{=value.title}}</span>
            </div>
        </td>
        <td>
            <p title="{{=value.author}}">
                {{?value.author}}
                {{=value.author}}
                {{?}}
            </p>
        </td>
        <td>
            <p title="{{=value.pubDate}}">
                {{?value.pubDate}}
                {{=value.pubDate}}
                {{?}}
            </p>
        </td>
        <td>
            <p title="{{=value.organization}}">
                {{?value.organization}}
                {{=value.organization}}
                {{?}}
            </p>
        </td>
        <td>
            <p title="{{=value.mediaCountry}}">
                {{?value.mediaCountry}}
                {{=value.mediaCountry}}
                {{?}}
            </p>
        </td>
        <td>
            <p title="{{=value.langName}}">
                {{?value.langName}}
                {{=value.langName}}
                {{?}}
            </p>
        </td>
        <td>
            <p title="{{=value.classifyName}}">
                {{?value.classifyName}}
                {{=value.classifyName}}
                {{?}}
            </p>
        </td>
        <td>
            <div class="flex">
                {{?current=="down"}}
                    <i class="icon4 icon_btn" id_="{{=value.downloadId}}" type="down"></i>
                {{??}}
                    <i class="icon5 icon_btn" id_="{{=value.id}}" type="collect"></i>
                {{?}}
            </div>
        </td>
    </tr>
    {{~}}
</script>

<script id="item_list_tem" type="text/x-dot-template">
    {{~it:value:index}}
    <li class="flex"><i class="search_i_2"></i><span>{{=value}}</span></li>
    {{~}}
</script>

<script id="item_list_tem1" type="text/x-dot-template">
    {{~it:value:index}}
    <div type="country" value="{{=value.searchValue}}" class="select_content_item">{{=value.searchLabel}}</div>
    {{~}}
</script>
<script id="item_list_tem2" type="text/x-dot-template">
    {{~it:value:index}}
    <div type="lang" value="{{=value.searchValue}}" class="select_content_item">{{=value.searchLabel}}</div>
    {{~}}
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/doT.min.js"></script>
<script src="../js/url.js"></script>
<script>


    var current = 'down',ajax_da = {
        // "searchValue" : ""
    },paging={
        "pageNo":"1",
        "pageSize":"20"
    };
    $(function(){

        render_user()

        var userinfo = JSON.parse(get_storage('userInfo'));
        if(userinfo){
            if(userinfo!=""&&userinfo.avatar){
                $('.photo2').css({
                    "background" : "url("+userinfo.avatar+")",
                    "background-size" : "cover"
                });
            }
            $('.name2').text(userinfo.loginName)
        }

        get_search_res()
        get_lang_country()


        $('body').on('click','.title_box',function () {
            var id_ = $(this).attr('id_');
            url_jump('detail',{"id":id_})
        })

        $('.tab_btn').on('click',function () {
            paging.pageNo = 1;
            var type = $(this).attr('type');
            $('.tab_btn').removeClass('active');
            $(this).addClass('active');
            current = type;
            $('#search_type2').attr({"value":"null"}).text('语言')
            delete ajax_da.lang;

            $('#search_type1').attr({"value":"null"}).text('国家')
            delete ajax_da.mediaCountry;
            $('.select_content').slideUp()
            get_search_res()
        });

        $('.search_btn').on('click',function () {
            var inp = $('.search_inp').val();
            if(inp==""){
                s_warning('请输入搜索的内容')
                return
            }else{
                $('#search_type2').attr({"value":"null"}).text('语言')
                delete ajax_da.lang;

                $('#search_type1').attr({"value":"null"}).text('国家')
                delete ajax_da.mediaCountry;
                paging.pageNo = 1;
                ajax_da.searchValue = inp;
                get_search_res();
            }
        });

        $('body').on('click','.icon_btn',function(){
            var that = $(this),url="",post_data={};
            var del_id = that.attr('id_');
            var type = that.attr('type');
            if(type=="down"){
                url=ajax_url.delDownloadHis;
                post_data['ids'] = del_id;
            }else{
                url=ajax_url.cancelCollect;
                post_data['docId'] = del_id;
            }
            jq_post(url,post_data,function (res) {
                that.parents('tr').remove()
            })
        })
    })

    function get_lang_country() {
        jq_get(ajax_url.selectCondition,function (res) {
            if(res.country&&res.country.length>0){
                res.country.unshift({"searchKey": "mediaCountry", "searchLabel": "国家", searchValue: "null"})
                doT_render('.select_content1','#item_list_tem1',res.country);
            }

            if(res.lang&&res.lang.length>0){
                res.lang.unshift({"searchKey": "lang", "searchLabel": "语言", "searchValue": "null"})
                doT_render('.select_content2','#item_list_tem2',res.lang);
            }
        })
    }

    $('.search_type,.search_i_3').on('click',function () {
        $(this).parent().find('.select_content').slideToggle();
    });

    $('body').on('click','.select_content_item',function () {
        paging.pageNo = 1;
        var type = $(this).attr("type");
        var value = $(this).attr('value');
        var text = $(this).text()

        if(type=="country"){
            $('#search_type2').attr({"value":"null"}).text('语言')
            delete ajax_da.lang;
            ajax_da.mediaCountry = value;
            $('#search_type1').text(text).attr({"value":value});
            $('.select_content1').slideToggle()
        }else{
            $('#search_type1').attr({"value":"null"}).text('国家')
            delete ajax_da.mediaCountry;
            ajax_da.lang = value;
            $('#search_type2').text(text).attr({"value":value});
            $('.select_content2').slideToggle();
        }
        get_search_res()

    });

    function get_search_res(){
        var url = "";
        if(current=="down"){
            url = ajax_url.userDownloadList;
        }else{
            url = ajax_url.userCollectList;
        }

        if(ajax_da.searchValue==""){
            s_warning('搜索内容不能为空')
            return
        }

        jq_post(url,Object.assign(ajax_da,paging),function (result) {
            $('.tbody').empty();
            if(result.data.length>0){
                var res = result.data;
                for(var i=0;i<res.length;i++){
                    res[i].current = current;
                    if(res[i].pubDate){
                        var ti = res[i].pubDate.split(' ')[0].replace(/-/g,'/');
                        res[i].pubDate = ti
                    }
                }

                doT_render('.tbody','#item_list_tem5',res);
                paging.pageNo = result.pageNo;
                paging.totalPage = result.totalPage;
                paging.total = result.total;
                paging_render('.paging_box_',paging)
            }else{
                $('.paging_box_').empty();
            }
            // judge_data(result.data,function (res) {
            //
            // })
        })
    }






</script>
</body>
</html>